---
{
	"title": "Data Inview",
	"language": "en",
	"category": "Plugins",
	"categoryfile": "plugins",
	"description": "Displays an overlay when a section moves out of the viewport.",
	"js": ["../../../demos/data-inview/demo/data-inview"],
	"altLangPrefix": "data-inview",
	"dateModified": "2014-08-04"
}
---
<span class="wb-prettify all-pre hide"></span>

<section>
	<h2>Purpose</h2>
	<p>Displays an overlay when a section moves out of the viewport.</p>
</section>

<section>
	<h2>Working example</h2>
	<ul>
		<li><a href="../../../demos/data-inview/data-inview-en.html">English example</a></li>
		<li><a href="../../../demos/data-inview/data-inview-fr.html">French example</a></li>
	</ul>
</section>

<section>
	<h2>Issues and Testing</h2>
	<p><a href="test-1.html">Test page for accessibility issue for screen readers</a></p>
</section>

<section>
	<h2>How to implement</h2>
	<ol>
		<li>
			<p>Add the <code>wb-inview</code> class to an element.</p>
			<pre><code>&lt;section class=&quot;wb-inview&quot;&gt;
	...
&lt;/section&gt;</code></pre>
		</li>
		<li>
			<p>Handle the view state changes using one of the following approaches:</p>
			<ol>
				<li>
					<p><strong>Overlays:</strong> You can open and close overlays based upon an element's view state.</p>
					<ol>
						<li>Add an overlay with a unique id. See the <a href="../overlay/overlay-en.html">overlay documentation</a> for further details.</li>
						<li>Add the <code>data-inview</code> attribute to the element with the value being the unique id of the overlay added in the previous step.</li>
						<li><strong>Optional:</strong> Add the <code>show-none</code> class to the element to make the overlay only open when the element is fully out of view (default is partially out of view).</li>
					</ol>
				</li>
				<li>
					<p><strong>Show/hide content:</strong> You can show/hide content with CSS transitions, based upon an element's view state.</p>
					<ol>
						<li>Add an element with a unique id.</li>
						<li>Add a CSS transition class to the element added in the previous step (e.g., <code>fade</code>, <code>slide</code>, <code>slidevert</code>, etc.)</li>
						<li><strong>Optional:</strong> Reverse the transition by adding the <code>reverse</code> class with the CSS transition.</li>
						<li>Add the <code>data-inview</code> attribute to the element with the <code>wb-inview</code> class with the value being the unique id of the element with the CSS transition class.</li>
						<li><strong>Optional:</strong> Add the <code>show-none</code> class to the <code>wb-inview</code> element, the CSS transition only occur when the <code>wb-inview</code> element is:
							<ul>
								<li>located <strong>Before</strong> and <strong>fully out of view</strong> (default is partially out of view)</li>
								<li>located <strong>After</strong> and <strong>partially out of view</strong> (default is fully out of view)</li>
							</ul>
						</li>
					</ol>
				</li>
				<li>
					<p><strong>Events:</strong> You can handle the view state change events through JavaScript.</p>
					<ol>
						<li>
							<p>Add an event handler to listen for each of the view state changes:</p>
							<pre><code>$( document ).trigger( "all.wb-inview partial.wb-inview none.wb-inview", function( event ) {
	if ( event.namespace === "wb-inview" ) {
		switch ( eventType ) {

		case "all":
			// event.target is a wb-inview element that has become completely visible
			break;

		case "partial": {
			// event.target is a wb-inview element that has become partially hidden
			break;

		case "none":
			// event.target is a wb-inview element that has become completely hidden
		}
	}
});</code></pre>
						</li>
					</ol>
				</li>
			</ol>
		</li>
	</ol>
</section>

<section class="wb-inview panel panel-default">
	<div class="panel-body">
		<h2 class="mrgn-tp-sm">View state change events</h2>
		<p>The view state of this section is being identified below through JavaScript.</p>
		<p><strong>View state:</strong> <code class="view-state-status"></code></p>

		<h3>HTML</h3>
		<pre><code>&lt;section class=&quot;wb-inview bar-demo&quot;&gt;
&lt;h3 class=&quot;no-gutter&quot;&gt;View state change events&lt;/h3&gt;
...
&lt;/section&gt;</code></pre>

		<h3>JavaScript</h3>
		<pre><code>(function( $, wb ) {
&quot;use strict&quot;;

wb.doc.on( &quot;all.wb-inview partial.wb-inview none.wb-inview&quot;, function( event) {
if ( event.namespace === &quot;wb-inview&quot; ) {
	$( event.target ).find( &quot;.view-state-status&quot; ).html( event.type );
}
});

})( jQuery, wb );</code></pre>
	</div>
</section>

<section>
	<h2>Configuration options</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Option</th>
				<th>Description</th>
				<th>How to configure</th>
				<th>Values</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>data-inview</code></td>
				<td>Identifies the element to trigger a change on (uses the unique id of the element).</td>
				<td>Add the <code>data-inview</code> attribute with the value being the unique id of the element to trigger a change on.</td>
				<td>Unique id of the target element</td>
			</tr>
			<tr>
				<td><code>show-none</code></td>
				<td>Overrides the overlay/CSS transition trigger to only occur when:
					<ul>
						<li>the element is completely hidden, if located before.</li>
						<li>the element is partially hidden, if located after.</li>
					</ul>
				</td>
				<td>Add the <code>show-none</code> class to the element.</td>
				<td>n/a</td>
			</tr>
			<tr>
				<td><code>in-only</code></td>
				<td>Displays the transition, the section that is triggered will then stay in place</td>
				<td>Add the <code>in-only</code> class to the element.</td>
				<td>n/a</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Events</h2>
	<table class="table">
		<thead>
			<tr>
				<th>Event</th>
				<th>Trigger</th>
				<th>What it does</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><code>wb-init.wb-inview</code></td>
				<td>Triggered manually (e.g., <code>$( ".wb-inview" ).trigger( "wb-init.wb-inview" );</code>).</td>
				<td>Used to manually initialize the Data Inview plugin. <strong>Note:</strong> The Data Inview plugin will be initialized automatically unless the required markup is added after the page has already loaded.</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb-inview</code> (v4.0.5+)</td>
				<td>Triggered automatically after the Data InView plugin has initialized.</td>
				<td>Used to identify where the Data InView plugin was initialized (target of the event)
					<pre><code>$( document ).on( "wb-ready.wb-inview", ".wb-inview", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-inview" ).on( "wb-ready.wb-inview", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>all.wb-inview</code> (v4.0.4+)</td>
				<td>Triggered automatically when a <code>wb-inview</code> element becomes completely visible.</td>
				<td>Used to identify that the view state of a <code>wb-inview</code> element has changed to <code>all</code>.
					<pre><code>$( document ).on( "all.wb-inview", ".wb-inview", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-inview" ).on( "all.wb-inview", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>partial.wb-inview</code> (v4.0.4+)</td>
				<td>Triggered automatically when a <code>wb-inview</code> element becomes partially hidden.</td>
				<td>Used to identify that the view state of a <code>wb-inview</code> element has changed to <code>partial</code>.
					<pre><code>$( document ).on( "partial.wb-inview", ".wb-inview", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-inview" ).on( "partial.wb-inview", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>none.wb-inview</code> (v4.0.4+)</td>
				<td>Triggered automatically when a <code>wb-inview</code> element becomes completely hidden.</td>
				<td>Used to identify that the view state of a <code>wb-inview</code> element has changed to <code>none</code>.
					<pre><code>$( document ).on( "none.wb-inview", ".wb-inview", function( event ) {
});</code></pre>
					<pre><code>$( ".wb-inview" ).on( "none.wb-inview", function( event ) {
});</code></pre>
				</td>
			</tr>
			<tr>
				<td><code>wb-ready.wb</code> (v4.0.5+)</td>
				<td>Triggered automatically when WET has finished loading and executing.</td>
				<td>Used to identify when all WET plugins and polyfills have finished loading and executing.
					<pre><code>$( document ).on( "wb-ready.wb", function( event ) {
});</code></pre>
				</td>
			</tr>
		</tbody>
	</table>
</section>

<section>
	<h2>Source code</h2>
	<p><a href="https://github.com/wet-boew/wet-boew/tree/master/src/plugins/data-inview">Data Inview plugin source code on GitHub</a></p>
</section>
